<template>
  <view class="index-content" v-if="showPage">  
    <wyb-popup ref="popup" type="left" height="400" width="500" radius="6" :showCloseIcon="true">
        <view class="popup-content">
            我是里面的内容
        </view>
    </wyb-popup>
	<!-- 导航栏 -->
	<view ref="tabbar1" id="tab-bar" class="tab-bar" >
		<view class="tab-bar-item item1" @click="show()"><i class="icon iconfont icon-caidan"></i></view>
		<view class="tab-bar-item item2">发现</view>
		<view class="tab-bar-item item3">云村</view>
		<view class="tab-bar-item item4" @click="showSearchView"><i class="iconfont icon-sousuo"></i></view>
	</view>

	<!-- banner轮播图 -->
	<swiper :indicator-dots="true" :autoplay="true" :circular="true" style="padding-top: 110rpx;" class="swiper-box">
		<swiper-item v-for="(item, index) in bannerData" :key="index">
			<image :src="item.imageUrl" mode=""></image>
		</swiper-item>
	</swiper>
	<!-- 导航栏、歌单、私人推荐等 -->
	<scroll-view class="nav" :scroll-x="true">
		<view class="nav-item" @click="goFM" >
			<span class="iconfont icon-dengpao"></span>
			<p class="nav-item-title">私人FM</p>
		</view>
		<view class="nav-item" @click="goGeDanGround" v-for="item in 8">
			<span class="iconfont icon-rili"></span>
			<p class="nav-item-title">每日推荐</p>
		</view>
	</scroll-view>
	<div class="jingxuan">
		<div class="jingxuan-title">
			<h5 class="title">{{pageData[2].uiElement.subTitle.title}}</h5>
			<a class="more" @click="goGeDanGround">查看更多</a>
		</div>
		<scroll-view class="jingxuan-content" :scroll-x="true">
			<view class="item" v-for="item in pageData[2].creatives" :key="item.creativeId" @click="goGeDanDetail(item.resources[0])">
				<div class="xiex-image">
					<xiex-image  :src="item.uiElement.image.imageUrl"></xiex-image>
				</div>
				<p class="describe">{{item.uiElement.mainTitle.title}}</p>
			</view>
		</scroll-view>
	</div>
	<div class="jingxuan">
		<div class="jingxuan-title">
			<h5 class="title">{{pageData[8].uiElement.subTitle.title}}</h5>
			<a class="more" @click="goGeDanGround">查看更多</a>
		</div>
		<scroll-view class="jingxuan-content" :scroll-x="true">
			<view class="item" v-for="item in pageData[8].creatives" :key="item.creativeId" @click="goGeDanDetail(item.resources[0])">
				<div class="xiex-image">
					<xiex-image  :src="item.uiElement.image.imageUrl"></xiex-image>
				</div>
				<p class="describe">{{item.uiElement.mainTitle.title}}</p>
			</view>
		</scroll-view>
	</div>
	 <!-- <view class="jingxuan">
		<view class="jingxuan-title">
			<h5 class="title">{{pageData?pageData[8].uiElement.subTitle.title:''}}</h5>
			<a class="more">播放全部</a>
		</view>
		<swiper class="jingxuan2-content">
			<swiper-item class="item" v-for="(item, index) in pageData[8].creatives" :key="index" >
				<view v-for="item2 in item.resources" class="item2" @click="play(item2)" :key="item.id">	
					<div class="xiex-image">
						<xiex-image  :src="item2.uiElement.image.imageUrl"></xiex-image>
					</div>
					<p>{{item2.resourceExtInfo.songData.name}}</p>
					<view class="display: flex"><span v-for="item3 in item2.resourceExtInfo.artists" class="name">{{item3.name}}</span></view>
				</view>
			</swiper-item>
		</swiper>
	</view> -->
	<!-- <view class="jingxuan">
		<view class="jingxuan-title">
			<h5 class="title">{{pageData?pageData[3].uiElement.subTitle.title: ''}}</h5>
			<a class="more">查看全部</a>
		</view>
		<scroll-view class="jingxuan-content" :scroll-x="true">
			<view class="item" v-for="item in pageData[3].creatives" :key="item.creativeId" @click="goGeDanDetail(item.resources[0])">
				<div class="xiex-image">
					<xiex-image  :src="item.uiElement.image.imageUrl"></xiex-image>
				</div>
				<p class="describe">{{item.uiElement.mainTitle.title}}</p>
			</view>
		</scroll-view>
	</view>
	<view class="jingxuan">
		<view class="jingxuan-title">
			<h5 class="title">{{pageData?pageData[8].uiElement.subTitle.title: ''}}</h5>
			<a class="more">查看全部电台</a>
		</view>
		<scroll-view class="jingxuan-content" :scroll-x="true">
			<view class="item" v-for="item in pageData[8].creatives" :key="item.creativeId">
				<div class="xiex-image">
					<xiex-image  :src="item.uiElement.image.imageUrl"></xiex-image>
				</div>
				<p class="describe">{{item.uiElement.mainTitle.title}}</p>
			</view>
		</scroll-view>
	</view> -->
	<!-- 音乐底部播放，点击弹出音乐界面 -->
	<view class="music-play" @click="showPlayView()">
		<tab-bar :iac="player"></tab-bar>
	</view>
	<!-- 音乐界面弹出 -->
	<wyb-popup ref="playView" type="bottom"  width="500" height="100%" radius="0" :showPlay="true" class="playView" style="position ralative; z-index :999">
		  <play-view @hidePlayView="hidePlayView" :iac="player"></play-view>
	</wyb-popup>
	<!-- 弹出搜索框 -->
	<wyb-popup ref="searchView" type="bottom"  width="500" height="100%" radius="0" :showPlay="true" class="searchView" style="position: relative; z-index: 9;">
	      
		  <view style="display: flex;" class="search-top-box">
				<i class="icon-fanhui1 iconfont back" @click="hideSearchView"></i>
				<input type="text" v-model="searchValue" class="search-input" @confirm="songSearch"/>
	      </view>
		  <image src="../../static/ad.png" mode="" class="goods-recmd" @click="goAd"></image>
		 
		  <view class="search-history"></view>
		  
		  <view class="hot-search-recmd"></view>
		 
		  <view class="search-result-box" v-for="item in nowSearchList" :key="item.id" :scroll-y="true" :enable-flex="true">
			  <view class="search-result-item" @click="play(item)">
				
				  <view>
					  <p>{{item.name}}</p>
					  <p>{{item.artists[0].name}}</p>
				  </view>
				  <i class="iconfont icon-gengduo"></i>
				  <div class="mask"></div>
			  </view>
			 
		  </view>
		   <wyb-pagination @change="onPageChange" :page-items="9" :total-items="totalItems":show-icon="true"/>
		  
		 <view class="music-play" @click="showPlayView()">
		  	<tab-bar :iac="player"></tab-bar>
		  </view>
		  
		  <view style="position: absolute; top: 50%; left: 40%; z-index: 999; padding: 20rpx; opacity: .3; background-color: #eee; border-radius: 10rpx;" v-if="searchValue2">输入不能为空</view>
	</wyb-popup> 
	 <wyb-popup ref="goodList" type="right" width="100%" height="100%" :showPlay="true" class="playList" style="position: relative; z-index: 10"></wyb-popup> 
  </view>
</template>

<script>
	import app from '../../App.vue'
	import wybPagination from '@/components/wyb-pagination/wyb-pagination.vue'
	import tabBar from '@/components/tabbar/tabbar.vue'
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
	const iac = app.globalData.iac
	// iac.autoplay = true
  // console.log(document.querySelector('html').offsetHeight)
  export default {
    data() {
      return {
		bannerData: [],
		geDanList: [],
		pageData: [],
		// docHeight: document.querySelector('html').offsetHeight,
		// 搜索页面数据
		searchValue: '让你爱上我要多久',
		searchValue2: false,
		searchResult: [],
		player: iac,
		playListId: '',
		playState: '',
		pageNum: 1,
		totalItems:0,
		showPage: false,
		scrollTop: 0,
		loadFlag: true
      }
    },
	components: {
	        wybPagination,
			tabBar,
			easyLoadimage
	    },
    onLoad() {
			this.getBanner()
			this.getGeDan()
			this.getHomePage()
		
		// iac.src = this.$store.state.song.url
		// iac.play()
	},
	onReady() {
		setTimeout(()=>{
			this.showPage = true
		}, 2000)
		iac.onEnded(()=>{
			this.nowSong.playState = true
		})
	},
	computed:{
		// 正在播放的歌曲
		nowSong(){
			// 用计算属性实现两个页面的控制。后续看能不能放到vuex中
			// iac.src = this.$store.state.song.url
			// if(this.$store.state.song.playState)iac.play()
			// else{iac.pause()}`
			// console.log(this.$store.state.song.playState,'index')
			return this.$store.getters.songData
		},
		nowSearchList(){
			return this.searchResult.slice((this.pageNum-1)*9, this.pageNum*9)
		},
		nextPlay(){
			return this.$store.getters.nextPlayData
		}
		
	},
    methods: {
		 show(){
			this.$refs.popup.show()
		  },
		  getBanner(){
			  uni.request({
			  	url: 'http://localhost:3000/banner',
				method: 'GET',
				success: async(res)=> {
					console.log(res)
					if(res.statusCode != 200)return console.log("banner数据获取失败")
					this.bannerData = await res.data.banners
				},
				fail(msg) {
					console.log(msg)
				},
				withCredentials: true,
				xhrFields: { withCredentials: true }
				
			  })
		  },
		  getGeDan(){
			  uni.request({
			  	url: 'http://localhost:3000/related/playlist?id=1',
				success: async(res) => {
					if(res.statusCode != 200) return console.log('fail to get geDan')
					this.geDanList = await res.data.playlists
					console.log(res.data.playlists)
				},
				withCredentials: true,
				xhrFields: { withCredentials: true }
			  })
		  },
		  getHomePage(){
			  uni.request({
			  	url: 'http://localhost:3000/homepage/block/page',
				success: async(res) => {
					this.pageData = await res.data.data.blocks
					console.log("pageData",this.pageData)
				},
				withCredentials: true,
				xhrFields: { withCredentials: true }
			  })
		  },
		  goGeDanGround(){
			  uni.navigateTo({
			  	url: '../gedanGround/gedanGround'
			  })
		  },
		  goFM(){
			  uni.navigateTo({
			  	url: '../index/personFM'
			  })
		  },
		  // 返回主页面,隐藏
		  hidePlayList(){
			  this.$refs.playlist.hide()
		  },
		  // 进入歌单列表
		  goGeDanDetail(resource){
			  // console.log(resource.resourceId)
			  uni.navigateTo({
			  	url: '../gedanDetail/gedanDetail?resourceId='+ resource.resourceId,
				animationType: 'slide-in-right',
				animationDuration: 200
			  })
		  },
		  // 出现播放器界面
		  showPlayView(){
			  this.$refs.playView.show()
		  },
		  hidePlayView(){
			  // console.log("我被调用了")
			  this.$refs.playView.hide()
		  },
		  // 点击了分享按钮
		  share(){
			  console.log('点击了share')
		  },
		  // 点击播放歌曲,优化了下代码结构
		  play(msg){
			  this.nowSong.id = msg.resourceId? msg.resourceId:null || msg.id
			  // console.log(msg)
				  // 获取音乐url
				  uni.request({
					url: "http://localhost:3000/song/url?id=" + this.nowSong.id,
					success: (res) => {
						console.log(res)
						if(!res.data.data[0].url)return console.log('权限不够')
						this.nowSong.url = res.data.data[0].url
						this.nowSong.playState = true
						this.nowSong.image =  msg.uiElement?msg.uiElement.image.imageUrl:null || msg.artists[0].img1v1Url
						this.nowSong.title =  msg.uiElement?msg.uiElement.mainTitle.title:null || msg.name
						this.nowSong.author = msg.uiElement?msg.resourceExtInfo.artists[0].name:null || msg.artists[0].name
						this.$store.commit('songChange', this.nowSong)
						iac.src = this.nowSong.url
						iac.play()
					}
				  })
			  
		  },
		  // 搜索框出现
		  showSearchView(){
			  this.$refs.searchView.show()
		  },
		  hideSearchView(){
			  this.$refs.searchView.hide()
		  },
		  songSearch(){
			  if(!this.searchValue){
				  this.searchValue2 = true
				  return setTimeout(()=>{this.searchValue2 = false},2000)
			  }
			  uni.request({
			  	url: 'http://localhost:3000/search?limit=100&keywords='+this.searchValue,
				success: (res) => {
					this.searchResult = res.data.result.songs
					this.totalItems = this.searchResult.length
					console.log(this.searchResult)
				}
			  })
		  },
		  test(msg){
			  console.log(this.pageData)
		  },
		  goAd(){
			  // uni.navigateTo({
			  // 	url: 'https://jwgr2333.github.io'
			  // })
			  uni.showToast({
			  	title: 'jwgr2333.github.io',
				icon: 'none'
			  })
		  },
		 onPageChange(e) {
			 // console.log(e)
			this.pageNum = e.current // 页码
			//   let type = e.type // 类型
		 }
		      
			  
    }
  }
</script>

<style lang="less" scoped>
	@variable: document.offsetHeight
	page {
		width: 100%;
		height: 100%;
	}
	.index-content {
		height: 100%;
		width: 100%;
		padding-bottom: 100rpx;
		// margin-top: 100rpx;
	}
	
	.tab-bar {
		position: fixed;
		z-index: 8;
		display: flex;
		background-color: #fff;
		/* justify-content: end; */
		/* white-space: nowrap; */
		width: 100%;
		height: 100rpx;
		padding: 20rpx;
		padding-bottom: 0;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.item2, .item3 {
		line-height: 64rpx;
	}

	.icon-caidan:before {
	    content: "\e65c";
	    font-size: 60rpx;
	}
	.icon-sousuo:before {
	    content: "\e60f";
		font-size: 60rpx;
	}
	swiper {
		swiper-item {
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.nav {
		// display: flex;
		// justify-content: space-between;
		white-space: nowrap;
		// align-items: space-between;
		height: 120rpx;
		width: 100%;
		// background-color: yellow;
	}
	.nav-item {
		display: inline-block;
		// display: flex;
		// flex-direction: column;
		padding: 10rpx 0 0 16rpx;
		margin: 0 10rpx;
		width: 100rpx;
		height: 100%;
		.iconfont {
			margin-left: 10rpx;
			font-size: 60rpx;
			// text-align: center;
			align-items: center;
			color: red;
			
		}
		.nav-item-title {
			font-size: 20rpx;
			// transform:scale(0.9, 0.9)
		}
	}
	.jingxuan {
		margin-top: 14rpx;
		padding: 0 14rpx;
		.jingxuan-title {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			align-items: center;
			.title {font-size: 40rpx;}
			a {
				font-size: 20rpx; 
				line-height: 48rpx;
				border: 2rpx solid #ccc;
				padding: 0 10rpx;
				border-radius: 40rpx;
			}
		}
		.jingxuan-content {
			position: relative;
			margin-top: 10rpx;
			white-space: nowrap;
			width: 100%;
			height: 300rpx;
			// justify-content: space-between;
			// background-color: pink;
			
			.item {
				// top: 0;
				height: 100%;
				width: 30%;
				display: inline-block;
				// display: flex;
				margin-right: 30rpx;
				// background-color: yellow;
				// align-items: center;
				
				.xiex-image {
					height: 70%;
					width: 100%;
					border-radius: 10rpx;
					// overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
				easy-loadimage {
					height: 70%;
					width: 100%;
					border-radius: 10rpx;
				}
				.describe {
					position: absolute;
					bottom: 0;
					width: 230rpx;
					height: 74rpx;
					font-size: 24rpx;
					white-space: normal;
					line-height: 40rpx;
				}
			}
		}
		.jingxuan2-content {
			margin-top: 10rpx;
			white-space: nowrap;
			width: 100%;
			height: 300rpx;
			// flex-direction: column;
			// justify-content: space-between;
			.item {
				width: 100%;
				display: inline-block;
				// margin-top: 20rpx;
				.item2 {
					display: flex;
					justify-content: space-between;
					padding: 0 10rpx 20rpx 0;
					font-size: 20rpx;
					.xiex-image {
						height: 84rpx;
						width: 84rpx;
						margin-right: 20rpx;
					}
					p {
						width: 30%;
						overflow: hidden;
					}
					.name {
						width: 30%;
						overflow: hidden;
					}
				}
			}
		}
	}
	.music-play {
		position: fixed;
		bottom: 0;
		width: 100%;
	}	
	
	// 搜索组件
	.searchView{
		// 顶部盒子
		.search-top-box {
			margin-top: 40rpx;
			.iconfont {
				margin-left: 40rpx;
				font-size: 50rpx;
				line-height: 46rpx;
			}
			.search-input {
				width: 75%;
				margin: 0 auto;
				padding: 0 10rpx;
				border-bottom: 1rpx solid #ccc;
			}
		}
		// 中间广告
		.goods-recmd {
			margin: 20rpx 5%;
			// background-color: yellow;
			width: 90%;
			height: 100rpx;
			border-radius: 20rpx;
			a {
				width: 100%;
				height: 100%;
			}
		}
		// 历史
		.search-history {
			
		}
		// 热搜推荐
		.hot-search-recmd {
			
		}
		.search-result-box {
			position: relative;
			margin: 10rpx 5%;
			width: 90%;
			font-size: 20rpx;
			color: #777;
			.search-result-item {
				display: flex;
				justify-content: space-between;
				padding-top: 10rpx;
				height: 80rpx;
				// background-color: pink;
				.iconfont {
					line-height: 65rpx;
				}
			}
			.mask {
				position: absolute;
				// z-index: 10;
				opacity: 0;
				width: 100%;
				height: 100%;
				background-color: #ccc;
			}
			.mask:hover {
				animation: wave 1s linear;
			}
		}
	}
	
	@keyframes wave {
		0% {
			opacity: 0.5;
			background-color: #ccc;
		}
		100% {
			opacity: 0;
		}
	}
  
</style>
